<template>
  <div class="time-display">
    <FlipNumber :value="hours" />
    <span class="colon">:</span>
    <FlipNumber :value="minutes" />
    <!-- <span class="colon">:</span> -->
    <!-- <FlipNumber :value="seconds" /> -->
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import FlipNumber from "./FlipNumber.vue";

// 定义当前时间
const currentTime = ref(new Date());

// 计算属性：格式化小时、分钟和秒
const hours = computed(() => {
  return currentTime.value.getHours().toString().padStart(2, "0");
});

const minutes = computed(() => {
  return currentTime.value.getMinutes().toString().padStart(2, "0");
});

const seconds = computed(() => {
  return currentTime.value.getSeconds().toString().padStart(2, "0");
});

// 更新时间的方法
const updateTime = () => {
  currentTime.value = new Date();
};

// 定时器
let timer = null;

// 在组件挂载时更新当前时间
onMounted(() => {
  // 初始更新当前时间
  currentTime.value = new Date();
  // 设置定时器，每秒更新一次时间
  timer = setInterval(updateTime, 1000);
});

// 在组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style lang="scss" scoped>
.time-display {
  font-size: 30px;
  text-align: center;
  display: inline-block;
}

.colon {
  font-size: 30px;
  margin: 0 5px;
}
</style>
